<template>
	<view>
		<u-search :placeholder="placeholder.show_name" @change="changedata" v-model="keyword" @custom="search"
			@clear="clearData"></u-search>
		<u-subsection v-if="resultVideo.length > 0" :list="list" :current="current" @change="secondLevelchange">
		</u-subsection>
		<view v-if="resultVideo.length > 0">
			<ALineOfaColumn :ALineOfaColumn="resultVideo" @ALineOfaColumnFunc="theCurrent"></ALineOfaColumn>
			<!-- <view class="baocnter" v-for="item in resultVideo" @click="theCurrent(item)">
        <view class="img">
          <image :src="item.pic" mode=""></image>
          <text>{{ item.duration }}</text>
        </view>
        <view class="msg">
          <view class="txt" v-html="item.title"></view>
          <view class="cloors upbox">
            <text class="up">up</text>
            {{ item.author }}</view
          >
          <view class="cloors tanmu">
            <u-icon name="play-circle"></u-icon
            >{{ item.favorites | unitConverter }}
            <u-icon name="more-circle"></u-icon
            >{{ item.video_review | unitConverter }}
          </view>
        </view>
      </view> -->
		</view>
		<view v-else>
			<view v-if="Object.keys(respondData).length > 0">
				<view class="resultstxt" v-for="(iten, index) in respondData" :key="index"
					@click="targetLanyard(iten.value)">{{ iten.value }}</view>
			</view>
			<view v-else>
				<view class="font" v-if="datapush.length > 0 ">大家都在搜</view>
				<view class="juny">
					<view v-for="(item, index) in datapush" :key="index" @click="targetLanyard(item.keyword)">
						{{ index + 1 }} {{ item.keyword }} </view>
				</view>
				<u-gap height="30" bg-color="#efefef"></u-gap>
				<view class="font">历史记录</view>
				<view class="hosts" v-for="(item, index) in host" :key="index">
					<u-tag :text="item" type="info" mode="plain" closeable @click="targetLanyard(item)"
						@close="tagClick(item, index + 1)" />
				</view>
			</view>
		</view>
		<loading v-if="isloading"></loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				datapush: [],
				placeholder: {},
				host: [],
				respondData: [],
				list: [{
						name: '默认排序',
						order: null,
					},
					{
						name: '播放多',
						order: 'click',
					},
					{
						name: '才发布',
						order: 'pubdate',
					},
					{
						name: '弹幕多',
						order: 'dm',
					},
				],
				current: 0,
				resultVideo: [],
				isloading: false,
				pageObj: {
					page: 1,
					pagesize: 10,
				},
			};
		},
		onLoad({
			data,
			val
		}) {
			try {
				this.placeholder = JSON.parse(data);
			} catch (e) {
				//TODO handle the exception
			}
			this.recommend();
			console.warn(data);
			console.warn(val);
			uni.getStorage({
				key: 'storage_host',
				success: (res) => {
					this.host = res.data;
				},
			});
		},
		onPullDownRefresh() {
			this.getdata()
		},
		onReachBottom() {
			this.pageObj.page++;
			this.getdata(this.keyword);
		},
		methods: {
			secondLevelchange(index) {
				this.resultVideo = [];
				this.current = index;
				this.getdata(this.keyword);
			},
			async recommend() {
				this.datapush = await this.http(this.api.recommend);
			},
			search(val) {
				if (val) {
					this.keyword = val;
					this.host.push(val);
					uni.setStorageSync('storage_host', [...new Set(this.host)]);
				}

				this.getdata(val || this.placeholder.show_name);
			},
			async getdata() {
				this.isloading = true;
				let {
					result
				} = await this.http(
					this.api.resultList, {
						keyword: this.keyword,
						page: this.pageObj.page,
						pagesize: this.pageObj.pagesize,
						dm: this.list[this.current].order,
						// video
					},
					'GET'
				);
				//#ifdef H5
				Array.isArray(result) && result.forEach(async (item) => {
					item.pic = this.baseHttpUrl + (await this.http(this.api.bilibili_get_img, {
						url: 'http:' + item.pic
					}, 'GET'));
				});
				//#endif

				this.resultVideo = [...this.resultVideo, ...result];
				this.isloading = false;
				uni.stopPullDownRefresh();
			},
			tagClick(item, index) {
				this.host.splice(0, index);
				uni.setStorageSync('storage_host', this.host);
			},
			async changedata(term) {
				if (!term) return false;
				this.isloading = true;
				this.respondData = await this.http(
					this.api.wantlist, {
						term,
					},
					'GET'
				);
				this.isloading = false;
			},
			clearData() {
				this.current = 0;
				this.resultVideo = [];
				this.respondData = [];
			},
			targetLanyard(val) {
				this.search(val);
			},
			theCurrent(data) {
				uni.navigateTo({
					url: `./info?data=${JSON.stringify(data)}`,
				});
			},
		},
	};
</script>

<style scoped lang="less">
	.juny {
		view {
			width: auto;
			display: inline-block;
			background: rgba(0, 0, 0, 0.19);
			padding: 8rpx;
			border-radius: 10rpx;
			margin: 8rpx;
			color: #ffffff;
		}
	}

	.hosts {
		width: auto;
		display: inline-block;
		padding: 10px;
	}

	.font {
		color: #999;
		font-size: 14px;
	}

	.keyword {
		color: red;
	}

	.resultstxt {
		padding: 20rpx;
		background-color: #f1f2f6;
		border-bottom: 1px outset rgba(255, 255, 255, 0.15);
	}
</style>
